/**
 * Created by shichunguang on 2016/12/7.
 */
/**
 *详情
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform,
    AsyncStorage,
    ScrollView,
    Alert,
} from 'react-native';
var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar
var BaseDeatilCell = require('./BaseDetailCell');
var Dimensions = require('Dimensions'); //Dimensions
var screenWidth = Dimensions.get('window').width; //屏宽
var BaseInquiry = require('./BaseInquiry');//询盘界面
var BaseNoContent =require('./BaseNoContent');//无查询结果
var imageJson = require('./Image.json');

var BaseDetail = React.createClass({
    getInitialState(){
        var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !==r2})
        return {
            //初始化收藏图片和文字
            collectionImg:require('../image/love.png'),
            collectionText:'收藏',
            dataSource:ds.cloneWithRows(imageJson)
        }
    },
    render() {
        return (
            <View style={styles.container}>
                <NavigatorBar title='详情' widthWH={Platform.OS == 'ios' ? 25:25} leftBtnName = 'back' rightBtnName = 'enjoy' leftpress={()=>this.leftAction()} rightPress={()=>this.rightAction()} />
                <ScrollView>
                    {/*顶部酒的基本信息*/}
                    <View style={styles.topView}>
                        <View>
                            <Text style={{marginTop:8,marginLeft:5,fontSize:18}}>
                                酱香型
                            </Text>
                        </View>
                        <View>
                            <View>
                                <Text style={{marginTop:8,textAlign:'center',fontSize:16}}>
                                    100吨
                                </Text>
                            </View>
                            <View>
                                <Text style={{textAlign:'center',fontSize:14,marginTop:5}}>
                                    数量
                                </Text>
                            </View>
                        </View>
                        <View>
                            <View>
                                <Text style={{marginRight:10,marginTop:8,textAlign:'right',fontSize:18,color:'red'}}>
                                    40000元/吨
                                </Text>
                            </View>
                            <View>
                                <Text style={{marginRight:10,textAlign:'right',fontSize:14,marginTop:5}}>
                                    2小时前
                                </Text>
                            </View>
                        </View>
                    </View>
                    {/*基础信息*/}
                    <View style={{backgroundColor:'#f4f5f6',height:40}}>
                        <Text style={{fontSize:20,marginTop:10,marginLeft:5}}>
                            基础信息
                        </Text>
                    </View>
                    {/*年份*/}
                    <BaseDeatilCell
                        leftName='年份'
                        rightContent='6年'
                    />
                    {/*产区*/}
                    <BaseDeatilCell
                        leftName='产区'
                        rightContent='贵州'
                    />
                    {/*分级*/}
                    <BaseDeatilCell
                        leftName='分级'
                        rightContent='一级'
                    />
                    {/*交割地*/}
                    <BaseDeatilCell
                        leftName='交割地'
                        rightContent='贵州遵义'
                    />
                    {/*原料*/}
                    <BaseDeatilCell
                        leftName='原料'
                        rightContent='高粱,小麦,荞麦,大米,红薯'
                    />
                    {/*基酒检测报告*/}
                    <View style={{backgroundColor:'#f4f5f6',height:40}}>
                        <Text style={{fontSize:20,marginTop:10,marginLeft:5}}>
                            基酒检测报告
                        </Text>
                    </View>
                    {/*检验报告图片*/}
                    <View>
                        <ListView
                            contentContainerStyle={{flexDirection:'row',flexWrap:'wrap'}}
                            dataSource = {this.state.dataSource}
                            renderRow = {this.renderRow}
                        />
                    </View>

                </ScrollView>
                {/*底部三个按钮*/}
                <View style={styles.bottomStyle}>
                    {/*收藏*/}
                    <TouchableOpacity onPress={()=>this.collectionAction()}>
                        <View style={{width:screenWidth/4,height:50,flexDirection:'row'}}>
                            <Image source={this.state.collectionImg} style={{marginTop:16,height:16,width:16,marginLeft:8}}/>
                            <Text style={{fontSize:22,textAlign:'center',marginTop:13,marginLeft:3}}>
                                {this.state.collectionText}
                            </Text>
                        </View>
                    </TouchableOpacity>
                    {/*联系客户*/}
                    <TouchableOpacity onPress={()=>this.phoneAction()}>
                        <View style={{width:screenWidth/4,height:50,borderLeftWidth:1,borderLeftColor:'#f4f5f6'}}>
                            <Text style={{fontSize:22,textAlign:'center',marginTop:13}}>
                                联系客户
                            </Text>
                        </View>
                    </TouchableOpacity>
                    {/*询盘*/}
                    <TouchableOpacity onPress={()=>this.inquiryAction()}>
                        <View style={{width:screenWidth/2,backgroundColor:'#0c7aff',height:50}}>
                            <Text style={{fontSize:22,textAlign:'center',marginTop:13,color:'white'}}>
                                询盘
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    },
    renderRow(rowData,sectionID,rowID,highlightRow){
        return(
            <View style={{width:screenWidth/2,height:screenWidth/4}}>
                <Image source={{uri:rowData.name}} style={styles.imageStyle}></Image>
            </View>
        )
    },
    //navigator上左边的按钮事件
    leftAction(){
        this.props.navigator.pop({

        })
    },
    //navigator上右边的按钮事件(暂时是调到BaseNoContent界面)
    rightAction(){
        this.props.navigator.push({
            component: BaseNoContent,
        })
    },
    //收藏点击事件
    collectionAction(){
        if(this.state.collectionImg ==require('../image/love.png')){
            this.setState({
                collectionImg:require('../image/love_fill.png'),
                collectionText:'已收藏'
            })
        }else {
            this.setState({
                collectionImg:require('../image/love.png'),
                collectionText:'收藏'
            })
        }
    },
    //联系客户点击事件
    phoneAction(){
        Alert.alert(
            '110',
            null,
                [
                    {text: '取消', onPress: ()=> console.log('点击取消')},
                    {text: '呼叫', onPress: ()=> console.log('点击呼叫')}
                ]
        );
    },
    //询盘点击事件
    inquiryAction(){
        this.props.navigator.push({
            component:BaseInquiry,
        })
    },
});


var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    //顶部酒的信息
    topView:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:60,
        borderBottomWidth:1,
        borderBottomColor:'#f4f5f6',
        backgroundColor:'white',
    },
    imageStyle:{
        width:(screenWidth-15)/2,
        marginLeft:5,
        height:(screenWidth-15)/2/2,
        marginTop:10,
    },
    bottomStyle:{
        height:50,
        backgroundColor:'white',
        marginBottom:0,
        flexDirection:'row'
    },
});

module.exports = BaseDetail;
